import { ref, onMounted } from "vue";
import { reqGetapige } from "@/api/index";
export function useIndexHooks() {
  const allDataList = ref();
  const HeaderBackGroundColor = ref({});
  const getDataList = async () => {
    const dataList = await reqGetapige();
    allDataList.value = dataList;
  };
  const configArr = [
    {
      HeaderBackGroundColor: "--cyan-200",
      HeaderBackTextColor: "--violet-600",
    },
    {
      HeaderBackGroundColor: "--magenta-900",
      HeaderBackTextColor: "--green-300",
    },
    {
      HeaderBackGroundColor: "--cyan-900",
      HeaderBackTextColor: "--yellow-050",
    },
    {
      HeaderBackGroundColor: "--magenta-200",
      HeaderBackTextColor: "--blue-700",
    },
    {
      HeaderBackGroundColor: "--yellow-100",
      HeaderBackTextColor: "--blue-600",
    },
    {
      HeaderBackGroundColor: "--cyan-900",
      HeaderBackTextColor: "--yellow-050",
    },
    {
      HeaderBackGroundColor: "--yellow-050",
      HeaderBackTextColor: "--orange-600",
    },
    {
      HeaderBackGroundColor: "--yellow-050",
      HeaderBackTextColor: "--cyan-900",
    },
    {
      HeaderBackGroundColor: "--blue-100",
      HeaderBackTextColor: "--blue-500",
    },
    {
      HeaderBackGroundColor: "--yellow-900",
      HeaderBackTextColor: "--yellow-050",
    },
    {
      HeaderBackGroundColor: "--yellow-100",
      HeaderBackTextColor: "--yellow-600",
    },
    {
      HeaderBackGroundColor: "--green-900",
      HeaderBackTextColor: "--magenta-300",
    },
  ];
  const setColor = () => {
    HeaderBackGroundColor.value =
      configArr[Math.floor(Math.random() * configArr.length)];
  };
  onMounted(async () => {
    await getDataList();
    setInterval(() => {
      setColor();
    }, 3000);
  });
  return { allDataList, configArr, HeaderBackGroundColor };
}
